<template>
	<view :style="{height:statusBarHeight}"
		style="width: 100%;background-color: #00000000;border-bottom: 1px solid #c48094;">
		&nbsp;
	</view>
	<uni-row style="margin-top: 15px;">
		<uni-col style="height: 35px;" v-for="(item,index) in platformArray" :span="24/platformArray.length"
			:key="index" :data-id="item" @click="choosePlatform">
			<view class="platformItem" :class="{choosedPlatformItem:item==nowPlatform}">{{item}}</view>
		</uni-col>
	</uni-row>
	<view class="login" v-if="showLogin">
		<uni-card :is-shadow="false" title="用户登陆" extra="by xunhuan NETWORK">
			<uni-forms :modelValue="userInfo">
				<uni-forms-item required label="账号" name="username">
					<uni-easyinput type="text" v-model="userInfo.username" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item required name="password" label="密码">
					<uni-easyinput type="password" v-model="userInfo.password" placeholder="请输入密码" />
				</uni-forms-item>
				<button class="buttonClass" @click="submitForm">登陆</button>
			</uni-forms>
		</uni-card>
	</view>
	<view class="" v-if="showLogin">
		<uni-card :is-shadow="false" title="取号" extra="by xunhuan NETWORK">
			<uni-forms :modelValue="mobileInfo">
				<uni-forms-item label="搜索项目">
					<uni-easyinput type="text" v-model="searchInfo" placeholder="请输入项目编号或名称" suffixIcon="search"
						@iconClick="searchProject" />
				</uni-forms-item>
				<uni-forms-item required label="项目" name="projectName">
					<select-lay :zindex="1211" :value="tval" name="name" placeholder="请选择项目" :options="datalist"
						@selectitem="selectItem">
					</select-lay>
				</uni-forms-item>
				<uni-forms-item name="operator" label="运营商">
					<uni-data-select v-model="mobileInfo.operator" :localdata="operatorArr"
						@change="operatorChange"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item name="numberInfo" label="指定号码">
					<uni-easyinput type="text" v-model="numberInfo" placeholder="输入号码或号段前五位或省(例:陕西)" />
				</uni-forms-item>
				<uni-forms-item name="scope_black" label="排除号段">
					<uni-easyinput type="text" v-model="mobileInfo.scope_black" placeholder="长度为3至7位且支持多个,用逗号分隔" />
				</uni-forms-item>
				<uni-forms-item name="creat_time" label="上线时间">
					<slider value="0" @change="sliderChange" step="1" activeColor="#c48094" block-size="20" min="1"
						max="60" show-value />
				</uni-forms-item>
				<view style="width: 100%;height: 40px;margin-bottom: 22px;">
					<view style="display: inline;">
						过滤已做：
						<switch checked="false" @change="loopChange" color="#c48094" style="transform:scale(0.8)" />
						指定卡商：
					</view>
					<uni-easyinput type="text" v-model="mobileInfo.designatedID"
						style="display: inline-block;width: 125px;line-height: 36px;height: 36px;"
						placeholder="输入卡商ID" />
				</view>
				<uni-row>
					<uni-col :span="8">
						<button class="buttonClass opButton" @click="getMobile">取号</button>
					</uni-col>
					<uni-col :span="8">
						<button style="background-color: green;" class="buttonClass opButton"
							@click="getMobile">释放</button>
					</uni-col>
					<uni-col :span="8">
						<button style="background-color: #000;" class="buttonClass opButton"
							@click="getMobile">拉黑</button>
					</uni-col>
				</uni-row>



			</uni-forms>
		</uni-card>
		<uni-card :is-shadow="false" title="验证码" extra="by xunhuan NETWORK">
			<uni-row>
				<uni-col :span="6">
					<view>验证码：</view>
				</uni-col>
				<uni-col :span="12">
					<view style="width: 100%;height: 100%;border: 1px solid #e5e5e5;border-radius: 4px;">
						&nbsp;{{smsCode}}</view>
				</uni-col>
				<uni-col :span="6">
					<view
						style="width: 80%;height: 25px;border-radius: 4px;background-color: #c48094;color: #fff;line-height:25px;text-align: center;margin-left: 10%;">
						复制</view>
				</uni-col>
			</uni-row>
			<uni-row style="margin-top: 15px;">
				<uni-col :span="6">
					<view>短信内容：</view>
				</uni-col>
				<uni-col :span="12">
					<view style="width: 100%;height: 100%;border: 1px solid #e5e5e5;border-radius: 4px;">&nbsp;</view>
				</uni-col>
				<uni-col :span="6">
					<view
						style="width: 80%;height: 25px;border-radius: 4px;background-color: #c48094;color: #fff;line-height:25px;text-align: center;margin-left: 10%;">
						复制</view>
				</uni-col>
			</uni-row>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				smsCode: "", //短信验证码
				smsContent: "", //短信内容
				searchInfo: "",
				showLogin: true,
				yeziURL: "http://api.sqhyw.net:90",
				yeziToken: "",
				statusBarHeight: "50px",
				platformArray: ["椰子", "豪猪"],
				nowPlatform: "椰子",
				userInfo: {
					username: "liuxunhuan",
					password: "wsdsb520"
				},
				mobileInfo: {
					api_id: "741366",
					operator: 0,
					scope_black: "",
					phone_num: "", //指定取号号码
					scope: "", //指定号段
					address: "", //归属地
					creat_time: "", //上线时间1-60
					loop: "0", //过滤已做
					designatedID: "", //指定卡商id
				},
				numberInfo: "",
				tval: "value2",
				datalist: [],
				operatorArr: [{
						value: 0,
						text: "默认"
					},
					{
						value: 1,
						text: "移动"
					},
					{
						value: 2,
						text: "联通"
					},
					{
						value: 3,
						text: "电信"
					},
					{
						value: 4,
						text: "实卡"
					},
					{
						value: 5,
						text: "虚卡"
					},
				],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: function(res) {
					console.log("顶部安全距离" + res.statusBarHeight)
					this.statusBarHeight = res.statusBarHeight + "px"
				}
			});
		},
		methods: {
			freeNumber() {

			},
			getMobile() {
				const reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
				if (reg.test(this.numberInfo)) {
					this.mobileInfo.address = this.numberInfo
				} else if (this.numberInfo.length == 11) {
					this.mobileInfo.phone_num = this.numberInfo
				} else {
					this.mobileInfo.scope = this.numberInfo
				}
				// const entries = Object.entries(this.mobileInfo);
				// entries.forEach(([key, value]) => {
				// 	console.log(`${key}: ${value}`);
				// });
				this.mobileInfo.token = this.yeziToken
				uni.request({
					url: `${this.yeziURL}/api/get_mobile`,
					data: this.mobileInfo,
					method: "GET",
					success: (res) => {
						console.log(res)
					}

				})

			},
			loopChange(e) {
				this.mobileInfo.loop = Number(e.detail.value) + ""
			},
			sliderChange(e) {
				// console.log(e.detail.value)
				this.mobileInfo.creat_time = e.detail.value
			},
			operatorChange(e) {
				console.log(this.mobileInfo)
			},
			selectItem(index, item) {
				console.log(item)
				if (index >= 0) {
					this.tval = item
				} else {
					this.tval = ""
				}
			},
			choosePlatform(e) {
				this.nowPlatform = e.currentTarget.dataset.id
			},
			submitForm() {
				if (this.userInfo.username == "" || this.userInfo.password == "") {
					uni.showToast({
						title: '登陆信息缺失',
						duration: 1000,
						icon: "error",
						mask: true
					});
					return
				} else if (this.userInfo.username.length <= 6 || this.userInfo.password.length <= 6) {
					uni.showModal({
						title: '提示',
						content: '账号或密码长度不得小于6位',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				switch (this.nowPlatform) {
					case "椰子":
						uni.request({
							url: `${this.yeziURL}/api/logins`,
							data: this.userInfo,
							method: "GET",
							success: (res) => {
								console.log(res)

								if (res.data.data.length == 0) {
									uni.showModal({
										title: '提示',
										content: res.data.message,
										success: function(res) {
											if (res.confirm) {
												console.log('用户点击确定');

											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
									return
								}
								this.showLogin = false
								uni.showToast({
									title: '登陆成功',
									duration: 1000,
									icon: "success",
									mask: true
								});
								uni.setStorage({
									key: 'yeziTOKEN',
									data: res.data.token,
									success: function() {
										console.log('数据缓存成功');
									}
								});
								uni.setStorage({
									key: 'yeziINFO',
									data: res.data.data,
									success: function() {
										console.log('数据缓存成功');
									}
								});
								this.getToken()

							}
						})
						break;
					case "豪猪":
						break;
				}
			},
			getToken() {
				uni.getStorage({
					key: 'yeziTOKEN',
					success: (res) => {
						this.yeziToken = res.data
					}
				});
			},
			searchProject() {
				if (this.searchInfo.length == 0) {
					uni.showToast({
						title: '搜索条件缺失',
						duration: 1000,
						icon: "error",
						mask: true
					});
					return
				}

				uni.request({
					url: `${this.yeziURL}/api/user_project_seach`,
					method: "POST",
					data: `token=${this.yeziToken};key=${this.searchInfo}`,
					success: (res) => {
						this.datalist = res.data.data
						console.log(this.datalist)
						uni.showToast({
							title: '搜索成功',
							duration: 800,
							icon: "success",
							mask: true
						});
					}
				})
			},
		}
	}
</script>

<style scoped>
	.opButton {
		transform: scale(0.8)
	}

	.buttonClass {
		background-color: #c48094;
		color: #fff;
	}

	.platformItem {
		width: 94%;
		height: 100%;
		line-height: 35px;
		text-align: center;
		border: 1px solid #ddd;
		border-radius: 5px;
		margin-left: 3%;
	}

	.choosedPlatformItem {
		border: 2px solid #c48094;
		background-color: #c48094;
		color: #fff;
	}
</style>